<template>
    <div v-infinite-scroll="handleInfiniteOnLoad"
         class="demo-infinite-container"
         :infinite-scroll-disabled="busy"
         :infinite-scroll-distance="10">
        <a-list style="padding: 16px 16px" :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 4, xxl: 8 }" :data-source="data">
            <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card :title="item.elements.page.pageTitle" :bordered="false">
                    <a slot="extra" target="_blank" :href="'http://www.miaobe.cn/page/' + item.sq_id">访问</a>
                    <p>创建时间: {{ item.created_at }}</p>
                    <template slot="actions" class="ant-card-actions">
                        <a-icon key="delete" type="delete" @click="confirmDelete(index)"/>
                        <a-icon key="edit" type="edit" @click="edit(index)" />
                        <a-icon key="database" type="database" @click="showData(index)" />
                    </template>
                </a-card>
            </a-list-item>
            <div v-if="loading && !busy" class="demo-loading-container">
                <a-spin />
            </div>
        </a-list>
    </div>
</template>
<style>
    .demo-infinite-container {
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        overflow: auto;
        padding: 8px 24px 50px 24px;
    }

    .demo-loading-container {
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
    }
</style>
<script>
    import infiniteScroll from 'vue-infinite-scroll';


    export default {
        directives: { infiniteScroll },
        data() {
            return {
                data : [],
                loading: false,
                busy: false,
            };
        },
        methods:{
            handleInfiniteOnLoad(){
                this.fetchData()
            },
            edit(index){
                let item = this.data[index];
                this.$store.commit('setPageHtmlElements',  item.elements.data);
                this.$store.commit('setPageGlobalConfig',  item.elements.page);
                this.$store.commit('setSqId', item.sq_id);
                this.$router.push('/')
            },
            async fetchData(){
                this.loading = true;
                let data = await this.$post('api/page/list',{ last_id : this.lastListId })
                if (data.length === 0){
                    this.busy = true
                }
                this.data = this.data.concat(data);
                this.loading = false;
            },
            showData(index){
                let item = this.data[index];
                this.$router.push({ name: 'data', params: { sq_id: item.sq_id }})
            },
            confirmDelete(index){
                let item = this.data[index];
                const _this = this;
                this.$confirm({
                    title: '是否确认删除',
                    content: '删除后该网站将不能访问, 是否确定删除 "'+ item.elements.page.pageTitle + '" 网站',
                    okText: '确认',
                    cancelText: '取消',
                    onOk() {
                        let promise =  _this.$post('api/page/del',{
                            id : item.id
                        });
                        promise.then(() => {
                            _this.data.splice(index, 1);
                            if (_this.data.length === 0){
                                _this.fetchData();
                            }
                        });
                        return promise
                    },
                    onCancel() {
                       // _this.publish(true)
                    },
                });
            }
        },
        computed: {
            lastListId() {
                if(this.data.length === 0){
                    return 0
                }
                return this.data[this.data.length - 1].id
            }
        }
    };
</script>
<style></style>
